import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Row, Col, Button, Icon, DatePicker, Select } from 'antd'
import { routerRedux } from 'dva/router'
import { basicDictTypeData, sexTypeData } from 'utils/seletLocalData'
import { connect } from 'dva'
import moment from 'moment'
import { config, strFormat, strSplit, SelectProps } from 'utils'
import styles from '../../../themes/detail.less'

const FormItem = Form.Item
const ButtonGroup = Button.Group
const Option = Select.Option
const { TextArea } = Input
const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
}

const ColProps = {
  span: 8,
  style: {
    marginBottom: 0,
  },
}


const ButtonProps = {
  size: 'large',
  style: {
    marginBottom: 0,
  },
}
const EntityDetail = ({
  entityDetail,
  dispatch,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
}) => {
  const entityInfo = entityDetail.data
  const { countryCodeData, editType, entityLegalFormData } = entityDetail
  let { hintOptions } = entityDetail
  const dateFormat = 'YYYY/MM/DD'
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      let fieldValue = getFieldsValue()
      let { account } = fieldValue
      account = strSplit(account)
      const data = {
        ...fieldValue,
        id: entityInfo.id || 1,
        account,
      }
      dispatch({
        type: `entityDetail/${editType}`,
        payload: data,
      })
    })
  }
  const onDelete = () => {

  }
  const onAddress = () => {
    dispatch(routerRedux.push({
      pathname: `/address/${entityInfo.id}/entityAddress`,
    }))
  }

  const onDirector = () => {
    dispatch(routerRedux.push({
      pathname: `/entityDirector/${entityInfo.id}`,
    }))
  }

  const onPhone = () => {
    dispatch(routerRedux.push({
      pathname: `/phone/${entityInfo.id}/entityPhone`,
    }))
  }
  const sexData = sexTypeData.map(d => <Option key={d.key}>{d.value}</Option>)
  const countryCodeOption = countryCodeData.map(d => <Option key={d.code}>{d.name}</Option>)
  const entityLegalFormDataOption = entityLegalFormData.map(d => <Option key={d.code}>{d.name}</Option>)
  const SelectHint = {
    mode: 'combobox',
    filterOption: false,
    onChange: (value) => {
      let key = value
      hintOptions = []
      value = strFormat(value)
      if (value.length === 0) {
        key = 'A'
      }
      const option = <Option key={key} value={value}>{value}</Option>
      hintOptions[0] = option
      dispatch({
        type: 'entityDetail/updateState',
        payload: {
          hintOptions,
        },
      })
    },
  }
  return (
    <Form layout="horizontal">
      {editType === 'update' ? <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={onPhone}>
            EntityPhone<Icon type="phone" />
          </Button>
          <Button onClick={onAddress}>
            EntityAddress<Icon type="environment-o" />
          </Button>
          <Button onClick={onDirector}>
            EntityDirector<Icon type="user" />
          </Button>
        </ButtonGroup>
      </div> : <div />}
      <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={handleOk}>
            Save<Icon type="save" />
          </Button>
          { editType === 'update' &&
            <Button onClick={onDelete}>
              Delete<Icon type="delete" />
            </Button>
          }
        </ButtonGroup>
      </div>
      <div className={styles.div_form}>
        <div className={styles.title}>BasicInfo</div>
        <Row gutter={0}>
          <Col span={12}>
            <FormItem label="Name" hasFeedback {...formItemLayout}>
              {getFieldDecorator('name', {
                initialValue: entityInfo.name,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="CommercialName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('commercialName', {
                initialValue: entityInfo.commercialName,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={12}>
            <FormItem label="AccountName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('accountName', {
                initialValue: entityInfo.accountName,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Account" hasFeedback {...formItemLayout}>
              {getFieldDecorator('account', {
                initialValue: entityInfo.account,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={12}>
            <FormItem label="IncorporationLegalForm" hasFeedback {...formItemLayout}>
              {getFieldDecorator('incorporationLegalForm', {
                initialValue: entityInfo.incorporationLegalForm||'G',
              })(<Select style={{ width: '100%' }} {...SelectProps}>{entityLegalFormDataOption}</Select>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Business" hasFeedback {...formItemLayout}>
              {getFieldDecorator('business', {
                initialValue: entityInfo.business,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={12}>
            <FormItem label="IncorporationNumber" hasFeedback {...formItemLayout}>
              {getFieldDecorator('incorporationNumber', {
                initialValue: entityInfo.incorporationNumber,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="IncorporationDate" hasFeedback {...formItemLayout}>
              {getFieldDecorator('incorporationDate', {
                initialValue: entityInfo.incorporationDate ? moment(entityInfo.incorporationDate, dateFormat) : '',
              })(<DatePicker style={{ width: '100%' }} format={dateFormat} />)}
            </FormItem>
          </Col>
        </Row>
        <div className={styles.title}>OtherInfo</div>
        <Row gutter={0}>
          <Col span={12}>
            <FormItem label="IncorporationState" hasFeedback {...formItemLayout}>
              {getFieldDecorator('incorporationState', {
                initialValue: entityInfo.incorporationState,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Country Code" hasFeedback {...formItemLayout}>
              {getFieldDecorator('incorporationCountryCode', {
                initialValue: entityInfo.incorporationCountryCode || 'NZ',
              })(<Select style={{ width: '100%' }} {...SelectProps}>{countryCodeOption}</Select>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={12}>
            <FormItem label="Email" hasFeedback {...formItemLayout}>
              {getFieldDecorator('email', {
                initialValue: entityInfo.email,
                rules: [
                  {
                    pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
                    message: 'E-mail pattern error!',
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Url" hasFeedback {...formItemLayout}>
              {getFieldDecorator('url', {
                initialValue: entityInfo.url,
                rules: [
                  {
                    pattern: new RegExp('[a-zA-z]+://[^\\s]*'),
                    message: 'Url format error',
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="IRD Number" hasFeedback {...formItemLayout}>
              {getFieldDecorator('irdNumber', {
                initialValue: entityInfo.irdNumber,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="GST Number" hasFeedback {...formItemLayout}>
              {getFieldDecorator('gstNumber', {
                initialValue: entityInfo.gstNumber,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={12}>
            <FormItem label="Comments" hasFeedback {...formItemLayout}>
              {getFieldDecorator('comments', {
                initialValue: entityInfo.comments,
              })(<TextArea rows={3} />)}
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>
  )
}

EntityDetail.propTypes = {
  form: PropTypes.object.isRequired,
  dispatch: PropTypes.func,
  entityDetail: PropTypes.object,
  loading: PropTypes.object,
}

export default connect(({ entityDetail, loading }) => ({ entityDetail, loading }))(Form.create()(EntityDetail))

